<template>
    <div class="component-push-list">
        <template v-if="push_list && push_list.length">
            <div class="push-list-box">
                <div class="push-list">
                    <div class="push" v-for='push in push_list' :key="push.id">
                        <div class="prop-group">
                            <a-icon style='font-size: 20px;' type="mail" />
                            <span class='prop-value color weight'>{{push.sender}}</span>
                            <span class='prop-value'>{{push.created_at}}</span>
                            <template v-if="push.type_id !== 52">
                                <span class='prop-value'>{{push.type}}</span>
                            </template>
                            <template v-else>
                                <span class='prop-value'>{{push.content}}</span>
                            </template>
                            <template v-if='push.type_id !== 52 && push.remark'>
                                <span v-if='task.status_id !== 3' class='prop-value'>{{push.remark}}</span>
                                <span v-else class='prop-value' style='color:red'>拒绝原因：{{push.remark || '暂无'}}</span>
                            </template>

                            <!-- 拒绝 && 接受 -->
                            <template v-if="push.type_id !== 52 && detail.status_id == 0">
                                <span style='margin-left: .5em; color: red; cursor: pointer;' @click="handle_show_refuse_task(push)">拒绝</span>
                                <span style='margin-left: .5em; color: #1890FF; cursor: pointer; ' @click="handle_accept_task(push)">接受</span>
                            </template>

                            <!-- 编辑 && 删除 -->
                            <template v-if="push.type_id === 52 && push.isDel">
                                <span @click="handle_show_edit_file_push(push)" style='margin-left: .5em; color: #1890FF; cursor: pointer;'>编辑</span>
                                <span @click="handle_delete_file_push(push)" style='margin-left: .5em; color: red; cursor: pointer;'>删除</span>
                            </template>
                        </div>
                        <file-push-list :fileList='push.images || []'/>
                    </div>
                </div>
                <div v-show="show_all" @click="handle_get_all_push_list" class="show-all">展开所有动态</div>
            </div>
        </template>
        <div v-else class="no-data">暂无数据</div>

        <!-- 拒绝任务 start -->
        <a-modal
            title="拒绝任务"
            :visible="task_refuse_visible"
            cancelText='我再想想'
            @ok="handle_refuse_task"
            @cancel='task_refuse_visible=false'
            >
           <a-form :form="task_refuse_form">
                <a-form-item label="拒绝原因">
                <a-input
                    placeholder='请输入拒绝原因'
                    v-decorator="['refuse_reason', { rules: [{ required: true, message: '请输入拒绝原因' }] }]"
                />
                </a-form-item>
           </a-form>
        </a-modal>
        <!-- 拒绝任务 end -->

        <!-- 编辑推送 start -->
        <a-modal
            title="修改"
            :visible="push_edit_visible"
            @ok="handle_edit_file_push"
            @cancel='push_edit_visible=false'
            >
           <a-form :form="push_edit_form">
                <a-form-item label="文本信息">
                <a-input
                    placeholder='请输入文本信息'
                    v-decorator="['content', { rules: [{ required: true, message: '请输入文本信息' }] }]"
                />
                </a-form-item>
           </a-form>
        </a-modal>
        <!-- 编辑推送 end -->

    </div>
</template>

<script>
    import FilePushList from '../file-push-list'
    export default {
        components: {
            FilePushList
        },
        props: {
            task: {
                type: Object,
                default: () => ({})
            },
            push_list: {
                type: Array,
                default: () => ([])
            },
        },
        watch: {
            task: {
               handler(value){
                    this.detail = value || {}
                },
                deep: true 
            },
            push_list: {
                handler(value){
                    this.list = value || []
                },
                deep: true
            },
        },
        data(){
            return {
                detail: {},
                list: [],
                show_all: true,

                task_refuse_visible: false,
                select_push_file: null,
                task_refuse_form: this.$form.createForm(this),

                push_edit_visible: false,
                push_edit_form: this.$form.createForm(this),
                push_edit_push: null,
            }
        },
        methods: {
            /** 获取所有的推送列表 */
            handle_get_all_push_list(){
                this.$parent.get_all_push_list();
                this.show_all = false
            },
            /** 拒绝任务弹窗 */
            handle_show_refuse_task(push){
                this.select_push_file = push
                this.task_refuse_visible = true
            },
            /** 拒绝任务 */
            handle_refuse_task(){
                const { select_push_file } = this
                if(select_push_file){
                    this.task_refuse_form.validateFields(async (err, values) => {
                        if(!err){
                            console.log('values:', values)
                            this.$parent.refuse_task(select_push_file, values);
                            this.task_refuse_visible = false
                        }
                    })
                }
            },
             /** 接受任务 */
            handle_accept_task(push){
                this.$parent.accept_task(push);
            },
            /** 显示编辑推送弹窗 */
            handle_show_edit_file_push(push){
                this.push_edit_push = push
                this.push_edit_visible = true
                this.$nextTick(() => {
                    this.push_edit_form.setFieldsValue({
                        content: push.content
                    })
                })
            },
            /** 编辑文件推送 */
            handle_edit_file_push(){
                const { push_edit_push } = this
                if(push_edit_push){
                    this.push_edit_form.validateFields(async (err, values) => {
                        if(!err){
                            this.$parent.push_file_edit(push_edit_push, values);
                            this.push_edit_visible = false
                        }
                    })
                }
            },
            /** 删除文件推送 */
            handle_delete_file_push(push){
                this.$parent.push_file_delete(push)
            }
        },
        mounted(){
        }
    }
</script>

<style lang="scss" scoped>
    .component-push-list{
        border: 1px solid #516479;
        margin: 20px 0;
        .prop-group{
            display: flex;
            align-items: center;
        }
        .no-data{
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .push-list-box{
            min-height: 200px;
            max-height: 300px;
            display: flex;
            flex-direction: column;
            .push-list{
                flex: 1;
                overflow: auto;
                padding: 0 20px;
                .push{
                    min-height: 50px;
                    .prop-value{
                        margin-left: .5em; 
                        line-height: 50px;
                        &.weight{
                            font-weight: bold;
                        }
                        &.color{
                            color: #1890FF; 
                        }
                    }
                }
                &::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                    position: absolute;
                    right: 0;

                }
                &::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 4px;
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background   : rgba(72, 161, 250, 1);
                }
                &::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 1px;
                    background   : #ededed;
                }
            }
            .show-all{
                flex-shrink: 0;
                text-align: center;
                line-height: 30px;
                cursor: pointer;
                &:hover{
                    color: #1890FF; 
                }
            }
        }
    }
</style>